<template>
	<CustomNavBar :showBack="false" :bgColor="data.bgColor">
		<template #title>
			<view class="shouc">
				个人中心
			</view>
		</template>
	</CustomNavBar>
	<view class="pages" :style="{ paddingTop: `${data.navBarHeight}px` }">
		<view class="nav_top">
			<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/bgpages.png" mode="aspectFill" class="bgImg"></image>
		</view>
		<view class="top_mes" @click="handleSwitch">
			<view class="photo">
				<image :src="infoData.avatorUrl||'/static/nameIcon/default.svg'" mode="widthFix" class=""></image>
			</view>
			<view class="info">
				<view class="name">
					{{loginStatus?infoData.nickName:'登录/注册'}}
				</view>
				<view class="state">
					{{loginStatus?infoData.realNameFlag?'已实名认证':'未实名认证':'点击登录注册'}}
					<!-- // {{infoData.realNameFlag?'实名认证':'点击登录注册'}} -->
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="widthFix" class="more_icon"></image>
				</view>
			</view>
		</view>
		<view class="pagesPe">
			<view class="list_box" v-if="userIdentity !='tourist' && userIdentity !='admin'">
				<block v-for="(item,index) in stateList" :key="index">
					<view class="list" @click="handleClick(item.code)" v-if="item.user.indexOf(userIdentity)>-1">
						<image :src="item.iconPath" mode="" class="list_icon"></image>
						<text>{{item.text}}</text>
					</view>
				</block>
			</view>
			<view class="list_box">
				<block v-for="(item,index) in funList" :key="index">
					<view class="list" @click="handleClick(item.code)" v-if="item.user.indexOf(userIdentity)>-1">
						<image :src="item.iconPath" mode="" class="list_icon"></image>
						<text>{{item.text}}</text>
					</view>
				</block>
			</view>
			<view class="list_block">
				<view class="list_line" v-for="(item,index ) in list" :key="index" @click="handleClick(item.code)">
					<image :src="item.iconPath" mode="" class="line_icon"></image>
					<view class="line_des">
						{{item.text}}
					</view>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="aspectFill" class="line_more_icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue';
	import {
		userInfo
	} from './js/api.js'
	import {
		stateList,
		funList,
		list,
		routeObj,
		identityObj
	} from './js/list.js';
	import {onShow} from '@dcloudio/uni-app'
	const app = getApp()
	const data = reactive({
		navBarHeight: 0,
		bgColor: ''
	})
	const loginStatus = ref(true)
	const infoData = ref({})
	const userIdentity = ref('tourist') //默认普通身份
	const getUserInfo = async () => {
		let res = await userInfo()
		if (res.data.code == 0) {
			let data = res.data.data
			// userIdentity.value = identityObj[4]
			userIdentity.value = identityObj[data.userType]
			infoData.value = data
			loginStatus.value = true
			app.setUserType(data.userType)
			app.setRealNameFlag(data.realNameFlag)
		} else {
			loginStatus.value = false
		}

	}
	onMounted(() => {
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight
		
		
		let userType = app.globalData.userType
		userIdentity.value = identityObj[userType]
	})
	onShow(()=>{
		getUserInfo()
		app.setTabBarBadge()
	})
	const handleClick = (source) => {
		if (source == 'collection' || source == 'msg') {
			uni.reLaunch({
				url: routeObj[source]
			})
			return false
		}
		if (routeObj[source]) {

			uni.navigateTo({
				url: routeObj[source]
			})
		}
	}
	const handleSwitch = () => {
		let route = '/pagesA/login/login'
		if (loginStatus.value) route = '/pagesA/personalData/personalData'
		uni.navigateTo({
			url: route
		})
	}
</script>

<style lang="less" scoped>
	.shouc {
		font-family: PingFangSC-Semibold;
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav_top {

		position: fixed;
		height: 393rpx;
		top: 0;
		width: 750rpx;
		z-index: -1;
		background-image: linear-gradient(180deg, #FFF7E0 0%, #FFF9E8 19%, #F6F6F6 100%);

		.bgImg {
			width: 100%;
			height: 393rpx;

		}
	}

	.pages {
		width: 100vw;
		// height: calc(100vh - 150rpx);
		// margin-bottom: 32rpx;
		// padding: 32rpx;



		.top_mes {
			display: flex;
			align-items: center;

			.photo {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				margin: 32rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background: #e3e4e5;
				image{
					width: 100%;
					
				}
			}

			.info {

				.name {
					font-family: PingFangSC-Semibold;
					font-size: 28rpx;
					color: #000000;
					letter-spacing: 0;
					line-height: 30rpx;
					font-weight: 600;
					margin-bottom: 16rpx;
				}

				.state {
					display: flex;
					align-items: center;
					font-family: PingFangSC-Regular;
					font-size: 22rpx;
					color: #000000;
					letter-spacing: 0;
					line-height: 28rpx;
					font-weight: 400;

					.more_icon {
						margin-left: 16rpx;
						width: 16rpx;
						// height: 18rpx;
					}
				}
			}
		}

		.pagesPe {
			background-image: linear-gradient(180deg, #FFF7E0 0%, #FFF9E8 19%, #F6F6F6 100%);
			width: 100%;
			height: calc(100vh - 300rpx);

			.list_box {
				display: flex;
				flex-wrap: wrap;
				width: 620rpx;
				margin: auto;
				// justify-content: space-between;
				background: #fff;
				padding: 0 40rpx 40rpx 40rpx;
				border-radius: 16rpx;
				margin-bottom: 32rpx;

				.list {
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					width: 25%;
					font-weight: 400;

					.list_icon {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 16rpx;
					}
				}

			}

			.list_block {
				background: #fff;
				border-radius: 16rpx;
				padding: 16rpx 32rpx 0rpx 32rpx;
				width: 620rpx;
				margin: auto;

				.list_line {
					display: flex;
					align-items: center;
					position: relative;

					.line_icon {
						width: 60rpx;
						height: 60rpx;
						margin-right: 32rpx;
					}

					.line_des {
						flex: 1;
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #333333;
						font-weight: 400;
						border-bottom: 1rpx solid #F6F6F6;
						height: 100rpx;
						line-height: 100rpx;
					}

					.line_more_icon {
						width: 24rpx;
						height: 40rpx;
						top: calc(50% - 20rpx);
						position: absolute;
						right: 16rpx;
						// transform:translate()
					}
				}
			}
		}
	}
</style>